<template>
	<el-dialog
		:visible="visible"
		@update:visible="updateVisible"
		width="800px"
		:show-close="false"
		:close-on-click-modal="false"
		:close-on-press-escape="false"
		append-to-body
		:title="title"
	>
		<slot></slot>
		<div slot="footer" style="text-align: center">
			<el-button size="mini" @click="$emit('cancel')">{{
				cancelButtonText
			}}</el-button>
			<el-button
				size="mini"
				type="primary"
				:disabled="confirmDisabled"
				@click="$emit('confirm')"
			>
				<span v-show="confirmDisabled">（{{ selfWaitDuration }}）</span>
				{{ confirmButtonText }}
			</el-button>
		</div>
	</el-dialog>
</template>

<script>
export default {
	props: {
		title: String,
		visible: Boolean,
		cancelButtonText: {
			type: String,
			default: '不同意'
		},
		confirmButtonText: {
			type: String,
			default: '已知悉并同意'
		},
		// 同意按钮等待时间
		waitDuration: {
			type: Number,
			default: 5
		}
	},
	data() {
		return {
			selfWaitDuration: 5,
			confirmDisabled: true
		}
	},
	watch: {
		visible(visible) {
			if (visible) {
				this.beginWait()
			} else {
				this.endWait()
			}
		}
	},
	computed: {},
	mounted() {},
	methods: {
		updateVisible(visible) {
			this.$emit('update:visible', visible)
		},

		beginWait() {
			this.confirmDisabled = this.waitDuration > 0
			this.selfWaitDuration = this.waitDuration

			if (!this.timer) {
				this.timer = setInterval(() => {
					this.selfWaitDuration--
					if (this.selfWaitDuration <= 0) {
						this.endWait()
					}
				}, 1000)
			}
		},
		endWait() {
			this.confirmDisabled = false
			clearInterval(this.timer)
			this.timer = null
		}
	},
	components: {}
}
</script>

<style lang="scss" scoped="scoped"></style>
